<template>
	<view>
		<view class="title">
			<text>请选择题库</text>
		</view>
		<radio-group class="content" name="radio" @change="radioChange">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="item_left"><text>{{item.name}}</text></view>
				<view class="item_right"><radio color="#007AFF" :value="item.id" :checked="index === current"/></view>
			</view>
			
		</radio-group>
		<view class="sub" @click="sub()">
			<button class="sub_but">提交</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				"current":0,
				'list':[]
			}
		},
		onLoad() {
			let that = this;
			uni.request({
			    url: that.websiteUrl+'/category', 
			    success: (res) => {
					if(res.data.code != 1){
						uni.showToast({
							title:"网络错误！",
							duration:2000,
							icon:'none',
						})
					} else {
						this.list = res.data.data;
					}
			    }
			});
		},
		onTabItemTap(e){
			console.log('onTabItemTap');
			console.log(e);
		},
		onShow(){
			
			try{
				let categoryCurrent = uni.getStorageSync('category_current');
				if(categoryCurrent){
					this.current = categoryCurrent;
				}
			}catch(e){
				console.log(e);
			}
			
		},
		methods: {
			sub(){
				uni.switchTab({
					url:"../index/index",
					success: function(e) {
					        var page = getCurrentPages().pop();
					        if (page == undefined || page == null) return;
					        page.onLoad();
					    }
				})
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].id == evt.target.value) {
						this.current = i;
						uni.setStorageSync("category_id",evt.target.value);//保存分类名称
						uni.setStorageSync('category', this.list[i].name); //保存分类id
						uni.setStorageSync('category_current',i);
						break;
					}
				}
			}
		}
	}
</script>

<style lang="scss">
.sub{
	background-color: #f07373;
	position: fixed;
	bottom: 0px;
	width:100%;
	.sub_but{
		background-color: #f07373;
		color:#ffffff;
	}
}
.title{
	height: 50px;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #F1F1F1;
	margin-bottom: 10px;
}
.content{
	
	.item{
		display: flex;
		font-size: 13px;
		height: 50px;
		border-bottom: 1px solid #C8C7CC;
	}
	.item_left{
		width:100%;
		padding-left: 15px;
		margin: auto 0;
	}
	.item_right{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		margin-right: 15px;
	}
	
}
</style>
